<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link
      rel="stylesheet"
      href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"
    />
    <style>
      .box {
        background: #ccc;
        height: 50px;
        margin-bottom: 10px;
      }
      .wrapper {
        overflow: hidden;
        height: 60px;
        transition: height 0.2s;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <button @click="toggle">展开</button>
      <div class="wrapper" ref="wrapper">
        <el-row :gutter="20">
          <el-col style="float:right;" :xs="12" :sm="8" :md="8" :lg="6" :xl="4">
            <div class="box">asdasd</div>
          </el-col>
          <el-col :xs="12" :sm="8" :md="8" :lg="6" :xl="4">
            <div class="box"></div>
          </el-col>

          <el-col :xs="12" :sm="8" :md="8" :lg="6" :xl="4">
            <div class="box"></div>
          </el-col>
          <el-col :xs="12" :sm="8" :md="8" :lg="6" :xl="4" v-for="i in 10">
            <div class="box"></div>
          </el-col>
        </el-row>
      </div>
    </div>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

    <script>
      function engine(duration, cb) {
        let raf, t0
        function start() {
          raf = requestAnimationFrame(run)
        }
        function stop() {
          raf = cancelAnimationFrame(raf)
        }
        function run(timestamp) {
          t0 = t0 || timestamp
          const dis = timestamp - t0
          if (dis > duration) {
            stop()
          } else {
            start()
          }
          cb(Math.min(dis / duration), 1)
        }
      }
      new Vue({
        data: {
          show: false
        },

        mounted() {
          function resize() {
          }
          window.addEventListener('resize', resize)
          this.$once('hook:beforeDestroy', () => {
            window.removeEventListener('resize', resize)
          })
        },
        methods: {
          computedHeight(){
            const el = this.$refs.wrapper
            el.style.height = 'auto'
              const height = el.clientHeight
              return height;
          },
          toggle() {
            const el = this.$refs.wrapper

            if (this.show) {
              el.style.height = '60px'
            } else {
              el.style.height = 'auto'
              const height = el.clientHeight
              console.log(height)
              el.style.height = '60px'

              el.style.height = height + 'px'
            }
            this.show = !this.show
          }
        }
      }).$mount('#app')
    </script>
  </body>
</html>
